<template>
  <div class="contaient">
    <div class="title">本地的todo list 代办清单</div>
    <el-button class="add" type="primary" plain @click="create">创建</el-button>

    <el-table :data="list" style="width: 100%">
      <el-table-column prop="text" label="内容" width="180" />
      <el-table-column prop="time" label="时间" width="180" />
      <el-table-column label="操作" width="300">
        <template #row="{}"></template>
        <el-button type="danger" @click="deleteList(id)">删除</el-button>
        <el-button type="primary" @click="putList(id)">编辑</el-button>
      </el-table-column>
    </el-table>

    <!-- 弹出框 -->
    <el-dialog v-model="dialogFormVisible" :title="isAdd ? '添加代办' : '修改代办'">
      <el-form :model="form">
        <el-form-item label="内容">
          <el-input v-model="form.text" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="时间">
          <!-- 时间 -->
          <el-date-picker v-model="form.time" type="date" placeholder="请选择时间" format="YYYY-MM-DD"
            value-format="YYYY-MM-DD" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span>
          <el-button type="primary" @click="addlist">添加</el-button>
        </span>
      </template>
    </el-dialog>

  </div>
</template>

<script>
import { create } from 'lodash'
import { setItem, getItem } from './util/storage.js'
export default {
  data () {
    return {
      dialogFormVisible: false,
      list: getItem('addlist') || [],
      form: { text: '', time: '' },
      isAdd: false
    }
  },
  methods: {
    //增
    create () {
      this.dialogFormVisible = true,
        this.isAdd = true
    },
    addlist () {
      if (this.isAdd) {
        this.dialogFormVisible = false,
          this.list.push({ ...this.form, id: this.list.length }),
          // 存储起来
          setItem('addlist', this.list)
      } else {
        // 修改
        this.dialogFormVisible = false
      }
    },
    // 改
    putList (id) {
      this.dialogFormVisible = true
      this.isAdd = false
      this.list.splice(id, 1, this.form)
    },
    //删
    deleteList (id) {
      this.list.splice(id, 1)
    }
  },
  // 删除修改重新存储
  watch: {
    list: {
      handler () {
        setItem('addlist', this.list)
      },
      deep: true,
      immediate: true
    }
  }
}
</script>


<style scoped>
.contaient {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.title {
  font-size: 30px;
  margin-bottom: 20px;
}

.v {
  margin: 20px 0;
}
</style>
